這是 Vuetify 它們對此框架的願景，就是要盡可能提供任何我們在開發上所需的元件。

Current State of Vueitfy & Why it's the best one

若你已有 UI 框架（ e.g. Bootstrap ）的使用經驗，可能你曾有過這樣的困擾：「 在某某框架裡，我找不到 UI 圖上的某個元件 」，若你要刻出的設計圖確實符合 MD，那我可以說，至少在我使用 Vuetify 的經驗中，還未碰過這類問題，就算沒有完全一樣的，也能透過 Functional Component Composition 組合出來。

Vuetify 在 Vue 的 UI 框架生態系裡並非擁有最多的星星數＊，但也是排在前幾名（ 若你真的很執著以星星數定生死的話 ），若以實踐 MD 的角度來看，Vuetify 堪稱首選（ 至少現在是 ），以下列出其優點

• 整合強大第三方套件（ e.g. Vue-mask ）
• 社群真的相當相當活躍（ 真心不騙，Q&A 超快啊！ ）
• 多數元件自帶 RWD
• Grid System 參考 Bootstrap 予以打造（ 熟悉 Bootstrap 的，你會發現似曾相似 ）
• 文件已趨近完善（ 事實上就算在 1.x 時，確實有不少 API 寫不完整或是根本沒寫在文件上，但多數查網路或是玩玩 Examples 並測試，多數都解的出來，而且根本沒花多少時間 ）
• 緊跟 MD Spec 並且持續擴充
• 越使用，越熟悉 MD 相關知識（ 我覺得這真是額外的好處，所以強烈建議學習 Vuetify，把它拿來當作開發 Side Project 的框架尤佳 ）
• 緊跟 Vue 開發進度（ 恩，也就是 Vue 要是有些部分沒做好 . . . 也會接連影響 Vuetify，目前 Vue 3 還沒發佈，在這期間有處理過渲染大量資料的人可能知道我在暗示什麼 ）
• Consulting, Enterprise Support（ 雖然這個是從官網複製貼上，但這得必須強調，當你看到一個開源專案有大量 Sponsor 甚至搞到最後提供企業諮詢等相關服務時，這就意味著這個專案只會越來越強大，白話文就是：放心使用吧！ ）
• Auto treeshaking（ 你可能覺得 Vuetify 很肥，但你照 "一般" 方式使用 Vuetify，它可不會一次性幫你導入所有組件，而是看你具體到底在專案中使用了哪些 Vuetify's UI Component ）

讀者可能發現，Quasar 正鼓勵 Vuetify 用戶跳槽，究竟要採用哪個框架，須視專案本身屬性而定，最常聽到的就是：若要整合 Electron，還是考慮前者。但事實上剛好筆者之前就整合過 Vuetify + Electron 的大型專案，並無太大問題，亦非難以整合。此外兩者定位也不相同（ 兩者使用的 Design Spec 亦不相同 ），Quasar 確實做了更大的願景，可惜目前仍處於 1.x 階段，我只認為適合 Side Project，但你真的不得不期待它發展的前景

＊BTW，純粹看星星數抉擇是否使用某某套件，這跟打數位廣告純粹只看點擊數就判定行銷成效一樣荒謬啊

Hi, Vuetify v.2.1.0

本系列文主要使用的版本是 2.0.19，就在筆者動筆的這幾天，它們又生版號了！現在是 2.1.0！不得不說 Vuetify 的更新速度令人驚艷，重點是這一版釋出的元件強大程度，實在讓人亢奮！！！雖然我不會在教學中重點使用這些東西，但以下還是快速簡介，讓讀者能夠初步了解它們大概的使用時機

首先是 v-lazy，簡單來講，就是若你開發一個往下滾動載入更多圖片的網站，你當然只想渲染那些因使用者滾動頁面而瀏覽到的圖片，而不是一次性的渲染所有網站中的圖片，這時就可以用 v-lazy，這可是超級重要的 Low-level Component，尤其開發那些有載入大量資料需求的 Web App，就可能會要用到 v-lazy

另一個它們稱作 v-skeleton-loader，但其實有相關開發經驗的人一看就會知道，其實這個東西有不同的叫法，例如 Google 工程師把它稱作 Tombstones，它的一個使用情境就是若你查閱跟某人的歷史對話，這時若你不斷的在對話視窗中往上滾動，並且假設可能有很多歷史訊息是圖片，或是更複雜的元件（ 例如影片、Reply Message . . . ），再加上可能滾動很快，不斷跟伺服器要過去時間的一包包訊息 . . .

可能每次從伺服器傳回的 "一包" 歷史訊息有 50 - 100 條，這時就牽扯渲染等相關效能問題（ 可不一定是有很多圖片要一次渲染才會造成這類效能問題，訊息量大也有機會 ），這時為了顧及使用者經驗，就會在有些東西還處於渲染、下載 . . . 狀態時，先讓使用者看到這個稱為 skeleton 或是 tombstones 的概念性圖樣，其一用意當然是讓用戶意會到將要看到的東西是什麼、它們目前正處於載入狀態 . . . 等等

至於還有兩個全新的，被歸類在 Directives 的 Intersection observer 和 Mutation observer 也都是相當底層的元件，這在一般的 UI 框架中不太常見，通常要使用這些功能時，要額外去找能幫你做到這些事的第三方套件，然後可能找到一堆，就要開始比較、測試、進而整合到專案中